<template>
  <div
    ref="faceRef"
    style="width: 100%; height: 100%"
  ></div>
</template>

<script setup>
import { attendance } from "@/api/apiData";
import { AesEncode } from "@/utils/crypto/crypto.js";
import { ref, defineEmits, inject } from "vue";
import { ElMessage, ElNotification, ElDialog } from "element-plus";
const props = defineProps({
  userType: {
    type: [String, Number], // 身份类型:1=学生,2=教师
  },
});
const emits = defineEmits(["change", "punch"]);
const { deviceDetail } = inject("global-stroe");
const faceRef = ref();

const init = () => {
  try {
    if (androidClient) {
      // console.log('androidClient',androidClient);
      //1、调用显示/隐藏人员识别区域
      showFaceReview();
      //2、在当前页面人员识别/刷卡接收相应数据
      window.addEventListener("message", getFaceMessage);
      // console.log("androidClient", androidClient);
    }
  } catch (error) {
    console.error("onOpen", error);
  }
};
const destroy = () => {
  window.removeEventListener("message", getFaceMessage);
  try {
    androidClient && androidClient.hideCameraPreview();
  } catch (error) {
    console.error("onClose:", error);
  }
};
/**
 * 调用显示人员识别区域
 */
function showFaceReview() {
  try {
    /*
        显示人员识别区域方法
        androidClient.showCameraPreview(int left, int top, int width, int height, false, false);
        left:距屏幕左边距
        top:距屏幕上边距
        width:识别框宽度
        height:识别框高度
    */
    const rect = faceRef.value.getBoundingClientRect();
    // DOMRect对象包含以下属性（单位：像素）
    // console.log("元素上边距:", rect.top); // 元素顶部到视口顶部的距离
    // console.log("元素左边距:", rect.left); // 元素左侧到视口左侧的距离
    // console.log("元素右边距:", rect.right); // 元素右侧到视口左侧的距离
    // console.log("元素下边距:", rect.bottom); // 元素底部到视口顶部的距离
    // 额外属性
    // console.log("元素宽度:", rect.width); // 元素宽度（包含padding和border）
    // console.log("元素高度:", rect.height); // 元素高度（包含padding和border）

    const left = rect.left;
    const top = rect.top;
    const width = rect.width;
    const height = rect.height;
    // console.log("left", left);
    // console.log("top", top);
    // console.log("width", width);
    // console.log("height", height);
    androidClient.showCameraPreview(left, top, width, height, false, false);
    //隐藏人员识别区域方法
    //androidClient.hideCameraPreview();
  } catch (error) {
    console.log("showFaceReview");
  }
}

/**
 * 在当前页面人员识别/刷卡接收相应数据
 */
function getFaceMessage(ev) {
  /*  if (!ev?.data?.includes("webpack")) {
      console.log("punch", JSON.parse(ev.data));
    } */
  let RecvMessage = JSON.parse(ev.data);
  console.log("RecvMessage", RecvMessage);
  switch (RecvMessage.action) {
    case "PostCardInfo":
      // console.log("卡号：" + RecvMessage.CardNo);
      //弹出提示
      // androidClient.showText("卡号：" + RecvMessage.CardNo);
      break;
    case "PostFaceInfo":
      console.log("工号：" + RecvMessage.AccountNo);
      //弹出提示
      // androidClient.showText("工号：" + RecvMessage.AccountNo);
      emits("change", { accountNo: RecvMessage.AccountNo });
      punch(RecvMessage.AccountNo);
      break;
    default:
      break;
  }
}
/**
 * 打卡
 */
function punch(account_no) {
  const room_id = deviceDetail.value?.room_id;
  let params = {
    room_id,
    user_type: props.userType,
    account_no: AesEncode(account_no),
  };
  attendance
    .punch(params)
    .then(({ code, data, msg }) => {
      if (code === 1) {
        emits("punch", {
          ...data,
          account_no,
        });
        ElMessage.success({
          customClass: "custom-message",
          message: msg || "打卡成功！",
        });
      } else {
        ElMessage.warning({
          customClass: "custom-message",
          message: msg,
        });
      }
    })
    .catch(() => {
      ElMessage.error("服务器报错，请稍后重试！");
    });
}

defineExpose({ init, destroy });
</script>

<style
  lang="scss"
  scoped
></style>
